<!--
    - 名称：atom-menu-toggle
    - 功能：切换左侧菜单
-->
<template>
    <el-tooltip :content="isCollapsed?'展开菜单':'折叠菜单'">
        <div @click="toggleCollapsed" class="p-2 cursor-pointer rounded-md bg-transparent hover:bg-[var(--el-fill-color-light)]">
            <el-icon :size="20">
                <Expand v-if="isCollapsed"/>
                <Fold v-else/>
            </el-icon>
        </div>
    </el-tooltip>
</template>

<script setup>
import {Expand, Fold} from "@element-plus/icons-vue"
import {useCollapsedStore} from '@/stores/collapsed';
import {storeToRefs} from 'pinia'

const store = useCollapsedStore()
const {isCollapsed} = storeToRefs(store);
const {toggleCollapsed} = store;

</script>

<style scoped lang="less"></style>